<script src="<?= image_url('/static/assets/global/scripts/echarts.min.js') ?>"></script>
<style>
    #detail_contain{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.60);
        z-index: 999;
    }
    #detail{
        top: 15%;
        left: 24%;
        height: 500px;
        width: 1000px;
    }
    .info-total {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .info-block {
        width: 22%;
        padding: 15px;
        color: white;
        height: 150px;
        box-shadow: 0 0 10px 10px #a9a8a885;
        border-radius: 4px;
    }

    .info-block h4{
        margin-top: 25px;
    }

    h4{
        margin-top: 40px;
    }

</style>
<div class="row">
    <div class="col-xs-12">
        <?= form_open('', Array('class' => 'form-inline', 'role' => 'form', 'id' => 'search-form')) ?>
        <div class="input-group input-large date-picker input-daterange" data-date=""
             data-date-format="yyyy-mm-dd">
            <input type="text" class="form-control" name="task_operate_create_time_begin"
                   value="<?= filterValue('task_operate_create_time_begin') ?>" placeholder="开始时间" autoComplete="off">
            <span class="input-group-addon">to </span>
            <input type="text" class="form-control" name="task_operate_create_time_end"
                   value="<?= filterValue('task_operate_create_time_end') ?>" placeholder="结束时间" autoComplete="off">
        </div>
        <?= search_form_dropdown('group_id', ['海外测评组'] + $allReviews, filterValue('group_id'), '所属组', 'class="form-control input-xs"'); ?>

        <button type="reset" class="btn default" id="reset">重置条件</button>
        <button type="button" class="btn green about_search" id="ajax-look">查看 <i class="fa fa-search"></i></button>
        <button type="button" class="btn blue" id="ajax-check">矫正 </button>
        <?= form_close() ?>
        <!--    统计信息    -->
        <div id="detail_contain">
            <div class="col-md-12" id="detail"></div>
        </div>
        <div class="col-md-12" style="margin-top: 20px;">
            <div class="col-md-9" id="pie" style="height: 500px"></div>
            <div class="col-md-3"  style="height: 500px; background: #333333;color: white;padding: 10px 50px;">
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-hand-o-up" aria-hidden="true"></i>任务总测评量 ：<span id="total-task">loading...</span></h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-tasks" aria-hidden="true"></i>总接测评量：<span id="total-accept">loading...</span> </h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-check-square" aria-hidden="true"></i>总完成测评量 ：<span id="total-finish">loading...</span></h4>
                <h4><i style="font-size: 32px;margin-right: 8px" class="fa fa-thumbs-up" aria-hidden="true"></i>平均完成率 <span id="total-ava">loading...</span>&nbsp %</h4>
            </div>
        </div>
        <div class="col-md-12" id="echart" style="height:500px;margin-top: 20px"></div>
    </div>
</div>
<script>
    $("#ajax-check").click(function () {
        if (!confirm("将会批量校检数据并更新，确认要校正数据吗？")) {
            return false;
        }
        $.ajax({
            url: '<?= site_url('/common/UpdateCeping') ?>',
            data: {},
            method: 'POST',
            dataType: 'JSON',
            success: function (res) {
                console.log(res)
                if (res.status){
                    toastr.success(res.msg,'成功');
                    setTimeout(function () {
                        location.reload();
                    },1200)
                } else {
                    toastr.error(res.msg,'失败');
                }
            },
            fail: function (res) {
                console.log(res)
            }
        })
    });
    function ajaxData(url, chartId, data, successCallback) {
        $.ajax({
            url: url,
            data: data,
            method: 'POST',
            dataType: 'json',
            success: function (res) {
                if (res.success) {
                    successCallback(res.data);
                } else {
                    console.log(res)
                }
            },
            fail: function (res) {
                console.log('error')
            }
        });
    }
    var myChart = echarts.init(document.getElementById('echart'),'dark');
    var myChartDetail = echarts.init(document.getElementById('detail'),'dark');
    var myChartPie = echarts.init(document.getElementById('pie'),'dark');
    var optionPie = {
        title : {
            text: '测评发布占比（默认全部测评）',
            subtext: '各组测评录入占比（搜索为当前时间段内录入占比）',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [

            {
                name:'发布占比',
                type:'pie',
                radius : [30, 110],
                center : ['50%', '50%'],
                roseType : 'area',
            }
        ]
    };
    var searchData = {
        'task_operate_create_time_begin': $("input[name='task_operate_create_time_begin']").val(),
        'task_operate_create_time_end': $("input[name='task_operate_create_time_end']").val(),
        'group_id': $("select[name='group_id']").val()
    };
    //初始化
    searchData.type = 'init';
    ajaxData('<?=site_url("/information/taskoperate/ajaxPieData")?>', myChart, searchData, function (res) {
        optionPie.legend.data = res.group;
        optionPie.series[0].data = res.data;
        $("#total-task").html(res.total.review_total);
        $("#total-accept").html(res.total.review_applied);
        $("#total-finish").html(res.total.review_finish);
        $("#total-ava").html((parseFloat(parseFloat(res.total.review_finish)/parseFloat(res.total.review_applied)).toFixed(4) * 100).toFixed(2));
        myChartPie.setOption(optionPie);
    });
    ajaxData('<?=site_url("/information/taskoperate/ajaxBlockData")?>', myChart, searchData, function (res) {
        var dataAxis = res.line;
        var data = res.source;
        var optionChart = {
            tooltip : {
                title:'dianji',
                trigger: 'axis',
                axisPointer : {
                    type : 'shadow' ,
                    label:{
                        show:false,
                        formatter: '{value}-点击查看'
                    }
                }
            },
            title: {
                text: '测评录入量（默认全部时间段内数据统计）',
                subtext: '搜索后为当前筛选时间段内数据统计'
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };
        myChart.setOption(optionChart);
    });

    //搜索
    $("#ajax-look").click(function () {
        if ($("input[name='task_operate_create_time_begin']").val() !== '' && $("input[name='task_operate_create_time_end']").val() == '' ){
            toastr.error('请选择结束时间！','未选择结束时间');
            return;
        }
        if ($("input[name='task_operate_create_time_begin']").val() == '' && $("input[name='task_operate_create_time_end']").val() !== '' ){
            toastr.error('请选择开始时间！','未选择开始时间');
            return;
        }

        var searchData = {
            'task_operate_create_time_begin': $("input[name='task_operate_create_time_begin']").val(),
            'task_operate_create_time_end': $("input[name='task_operate_create_time_end']").val(),
            'group_id': $("select[name='group_id']").val()
        };
        searchData.type = 'search';
        ajaxData('<?=site_url("/information/taskoperate/ajaxPieData")?>', myChart, searchData, function (res) {
            optionPie.legend.data = res.group;
            optionPie.series[0].data = res.data;
            $("#total-task").html(res.total.review_total);
            $("#total-accept").html(res.total.review_applied);
            $("#total-finish").html(res.total.review_finish);
            $("#total-ava").html((parseFloat(parseFloat(res.total.review_finish)/parseFloat(res.total.review_applied)).toFixed(4) * 100).toFixed(2));
            myChartPie.setOption(optionPie,true);
        });
        ajaxData('<?=site_url("/information/taskoperate/ajaxBlockData")?>', myChart, searchData, function (res) {
            var dataAxis = res.line;
            var data = res.source;

            var optionChart = {
                tooltip : {
                    title:'dianji',
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow' ,
                        label:{
                            show:false,
                            formatter: '{value}-点击查看'
                        }
                    }
                },
                title: {
                    text: '测评录入量（默认全部测评占比）',
                    subtext: '点击搜索后为当前筛选时间段内数据统计'
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: true,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#83bff6'}
                                    ]
                                )
                            }
                        },
                        data: data
                    }
                ]
            };
            myChart.setOption(optionChart, true);
        });
    });

    myChart.on('click', function (params) {
        console.log(params)
        var searchData = {
            'task_operate_create_time_begin': $("input[name='task_operate_create_time_begin']").val(),
            'task_operate_create_time_end': $("input[name='task_operate_create_time_end']").val(),
        };
        searchData.person = params.name;
        ajaxData('<?=site_url("/information/taskoperate/ajaxDetail")?>', myChartDetail, searchData, function (res) {
            $("#detail_contain").fadeIn();
            var title = params.name + '（接单量/完成率：截止日期前接单总量/完成率）';
            var colors = ['#5793f3', '#d14a61', '#675bba'];
            option = {
                color: colors,
                title: {
                    text: title,
                    left: 'center',
                    top: 20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    right: '20%'
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    data:['总接单量','该日录入量','总完成率']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        // data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '总接单量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        axisLine: {
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 单'
                        }
                    },
                    {
                        type: 'value',
                        name: '该日录入量',
                        min: 0,
                        max: 250,
                        position: 'right',
                        offset: 80,
                        axisLine: {
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 单'
                        }
                    },
                    {
                        type: 'value',
                        name: '总完成率',
                        min: 0,
                        max: 25,
                        position: 'left',
                        axisLine: {
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name:'总接单量',
                        type:'bar',
                        // data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name:'该日录入量',
                        type:'bar',
                        yAxisIndex: 1,
                        // data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    },
                    {
                        name:'总完成率',
                        type:'line',
                        yAxisIndex: 2,
                        // data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };
            option.xAxis[0].data = res.arr;
            option.series[0].data = res.app;
            option.series[1].data = res.counts;
            option.series[2].data = res.rates;
            option.yAxis[0].max = Math.max.apply(null, res.app);
            option.yAxis[1].max = Math.max.apply(null, res.counts);
            option.yAxis[2].max = Math.max.apply(null, res.rates);
            myChartDetail.setOption(option, true);
        });
    });

    $("#detail_contain").click(function () {
        $("#detail_contain").fadeOut();
    });
    $("#detail").click(function (event) {
        event.stopPropagation();    //  阻止事件冒泡
    })
</script>
